import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import {
  SNode,
  NodeAnd,
  NodeOr,
  CONDITION_WIDTH,
  CONDITION_GAP,
  PARENT_CHILD_DISTANCE,
  NodeData,
  NodeCondition,
  NodePlain,
  MoveType
} from '../module';
import { DialogComponent } from '../dialog/dialog.component';
import { MatDialog, MatMenuTrigger } from '@angular/material';
import { SvgService } from '../svgdom/svg.service';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  // tslint:disable-next-line: component-selector
  selector: 'node',
  templateUrl: './node.component.html',
  styleUrls: ['./node.component.scss']
})
export class NodeComponent implements OnInit {
  @ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;
  @Input() dataSourcs: SNode;
  readonly NodeAnd = NodeAnd;
  readonly NodeOr = NodeOr;
  readonly NodeCondition = NodeCondition;
  readonly NodePlain = NodePlain;
  Bserpathdata = '';
  cDisplay: boolean; // 圆是否显示
  textDisplay: boolean; // 字体是否显示
  widthdata = 1; // 边框宽度
  IsNodeConditionDisplay = false; // 各个node是否显示
  IsNodePlainDisplay = false;
  IsNodeConnectDisplay = false;
  // 右击弹出的功能菜单
  OnRightClick() {
    this.matMenuTrigger.openMenu();
    return false;
  }

  //  弹出菜单
  OpenDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      data: {
        NodeType: this.dataSourcs.NodeType,
        Field: this.dataSourcs.Data.Conditions.Field,
        Value: this.dataSourcs.Data.Conditions.Value,
        Operate: this.dataSourcs.Data.Conditions.Operate,
        Status: 'update',
        PlainText: this.dataSourcs.Data.Conditions.PlainText,
        ColumnNames: this.dataSourcs.Data.ColumnNames
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        if (result.Status === 'update') {
          this.dataSourcs.Data.Conditions.Field = result.Field;
          this.dataSourcs.Data.Conditions.Operate = result.Operate;
          this.dataSourcs.Data.Conditions.Value = result.Value;
          this.dataSourcs.Data.Conditions.PlainText = result.PlainText;
        } else {
          this.dataSourcs.Delete();
        }
      }
    });
  }

  // 删除一个节点
  DeleteNode() {
    this.dataSourcs.Delete();
  }

  // 剪切
  CutClick() {
    if (this.dataSourcs.Parent) {
      this.dataSourcs.Status = 'cut';
      this.ser.SelectNode = this.dataSourcs;
      // 状态为剪切
    } else {
      alert('根节点不能剪切');
    }
  }
  // 复制
  CopyClick() {
    this.dataSourcs.Status = 'copy';
    this.ser.SelectNode = this.dataSourcs;
    // 状态为复制
  }

  // 粘贴
  PasterClick() {
    let ds: SNode = new SNode();
    if (!ds.Children) {
      ds.Children = [];
    }
    ds = this.getNewSNode(this.ser.SelectNode); // 先把根节点复制出来，后续所有节点都跟在该节点后面

    ds.Parent = this.dataSourcs;
    ds = this.CopyforeachTree(this.ser.SelectNode, ds);
    this.dataSourcs.Children.push(ds);

    if (this.ser.SelectNode.Status === 'cut') {
      const ls = this.ser.SelectNode.Parent.Children.indexOf(this.ser.SelectNode);
      this.ser.SelectNode.Parent.Children.splice(ls, 1);
    }

    this.dataSourcs.Status = 'n';
  }
  // 复制一棵树
  CopyforeachTree(sourcetree, copyTree: SNode): SNode {
    if (sourcetree.Children.length > 0) {
      sourcetree.Children.forEach(v => {
        const ns: SNode = this.getNewSNode(v);

        ns.Parent = copyTree;
        copyTree.Children.push(ns);
        return this.CopyforeachTree(v, ns);
      });
    }
    return copyTree;
  }
  // 复制该树，返回一个新地址相同内容的树,未设置父节点，子节点，位置
  getNewSNode(dataTree: SNode): SNode {
    const tn: NodeData = {
      Conditions: dataTree.Data.Conditions,
      ColumnNames: [],
      IsSvgDisplay: dataTree.Data.IsSvgDisplay,
      IsDisplay: dataTree.Data.IsDisplay,
      IsExistele: dataTree.Data.IsExistele,
      IsMarkDisplay: dataTree.Data.IsMarkDisplay
    };
    const ts: SNode = new SNode();
    ts.NodeType = dataTree.NodeType;
    ts.Parent = null;
    ts.Status = 'n';
    ts.Data = tn;
    ts.Children = [];
    return ts;
  }

  // 点击,选中
  SelectSNode() {
    if (this.dataSourcs.Status === 'select') {
      this.dataSourcs.Status = 'n';
    } else {
      this.dataSourcs.Status = 'select';
    }
    this.ser.SelectNode = this.dataSourcs;
  }

  GetDisplayText(txt: string): string {
    if (txt.length > 3) {
      return txt.slice(0, 3) + '.. ';
    }
    return txt;
  }
  AddOneChildNode() {
    const ds: SNode = new SNode();
    const dt: NodeData = {
      Conditions: this.dataSourcs.Data.Conditions,
      ColumnNames: this.dataSourcs.Data.ColumnNames, // 列的所有名称，用来弹出框中的下拉选项
      IsSvgDisplay: true, // svg线条是否显示,true为显示
      IsDisplay: true, // 除线条之外是否显示
      IsExistele: false, // 该点是否有收缩，true为有
      IsMarkDisplay: false // 遮罩层是否显示，true为显示
    };
    ds.Data = dt;
    ds.NodeType = NodeAnd;
    ds.Parent = this.dataSourcs;
    ds.Status = 'n';
    this.dataSourcs.AddChildNode(ds);
  }
  ChangeType() {
    if (this.dataSourcs.NodeType === NodeAnd) {
      this.dataSourcs.NodeType = NodeOr;
    } else {
      this.dataSourcs.NodeType = NodeAnd;
    }
  }

  // 拖拽释放事件
  ReleaseDrop(event: CdkDragDrop<{ title: string; poster: string }[]>) {
    this.ser.IsMaskDisplayShow = false;
    this.dataSourcs.Data.IsMarkDisplay = false;
  }
  // 开始拖拽
  StarDrop() {
    this.ser.IsMaskDisplayShow = true;
    this.SetMovingSNode();
  }

  // 获取是否在拖拽的状态
  GetMarkShowMes(): boolean {
    return this.ser.IsMaskDisplayShow;
  }
  // 改变遮罩层是否显示,鼠标进入事件
  ChangeIsMarkDisplayShow() {
    if (this.ser.IsMaskDisplayShow) {
      this.dataSourcs.Data.IsMarkDisplay = true;
    }
  }
  // 改变遮罩层是否显示
  ChangeIsMarkDisplayHide() {
    if (this.ser.IsMaskDisplayShow) {
      this.dataSourcs.Data.IsMarkDisplay = false;
    }
  }
  // 设置保存正在拖拽的节点
  SetMovingSNode() {
    const ms: MoveType = {
      MoveSNode: this.dataSourcs,
      AddOrMove: false // true为新增
    };
    this.ser.MovingData = ms;
  }

  GetSvgHeight(): number {
    const height = this.dataSourcs.GetLogicHeight() * (CONDITION_WIDTH + CONDITION_GAP) - CONDITION_GAP;
    return height;
  }
  constructor(public dialog: MatDialog, private ser: SvgService, public el: ElementRef) {}
  ngOnInit() {
    if (!this.dataSourcs.Children) {
      this.dataSourcs.Children = [];
    }
  }
}
